<template>
  <transition name="detail">
    <section
      v-show="detailShow"
      class="nb-detail-wrapper"
      @click.stop="stopEvent"
      :style="{'width': width+ '%'}"
    >
      <!--<span class="el-icon-error" @click.stop="hide"></span>-->
      <div class=" nb-detail-content">
        <div
          class="detail-top-wrapper"
          v-if="header"
        >
          <img :src="url || '../../../src/assets/image/customerDefault.png'"/>
          <div class="detail-title-wrappers">
            <div class="title">
              {{title}}
              <slot name="title"></slot>
            </div>
            <div class="tips">
              <slot name="tips"></slot>
            </div>
            <div class="footers">
              <slot name="top"></slot>
            </div>
          </div>
          <div class="button-wrapper">
            <nb-button
              type="plain"
              text
              @click.stop="hide"
              icon="el-icon-arrow-left"
              width="84"
              class="back-btn"
            >返回</nb-button>
            <nb-button
              menu
              :options="topOptions"
              @click="clickOptions"
            ></nb-button>
          </div>
        </div>
        <div class="detail-content-wrapper">
          <div
            class="detail-content-left"
            :class="{m: right}"
          >
            <slot></slot>
          </div>
          <div
            v-if="right"
            class="detail-content-right"
          >
            <slot name="right"></slot>
          </div>
        </div>
      </div>
    </section>
  </transition>
</template>

<script>
  /**
   * 基本功能：页面布局、动画交互
   * 包含上部top slot  主题默认slot  右侧  right slot
   * topOptions label value icon
   */
  import NbButton from '@/components/nb-button'
  export default {
    data () {
      return {
      }
    },
    watch: {
      detailStatus () {
        this.hide()
      }
    },
    props: {
      width: {
        type: String,
        default: '80'
      },
      url: {
        type: String,
        default: ''
      },
      title: String,
      topOptions: {
        type: Array,
        default: () => {
          return []
        }
      },
      header: {
        type: Boolean,
        default: true
      },
      right: {
        type: Boolean,
        default: true
      }
    },
    components: {
      NbButton
    },
    computed: {
      detailShow () {
        return this.$store.state.layout.isShowDetial
      },
      detailStatus () {
        return this.$store.state.user.detailStatus
      }
    },
    methods: {
      show () {
        if (this.detailShow) return
        this.$store.commit('UPDATE_ISDETAIL')
        this.$store.commit('UPDATE_ISCOLLAPSE')
      },
      hide () {
        this.$parent.delChildSearch && this.$parent.delChildSearch(this.delModel)
        if (!this.detailShow) return
        this.$store.commit('UPDATE_ISDETAIL')
        this.$store.commit('UPDATE_ISCOLLAPSE')
        this.$store.commit('UPDATE_EDIT', false)
        this.$emit('backEvent')
      },
      stopEvent () {},
      clickOptions (command) {
        this.$emit('clickMenu', command)
      },
      delModel (target) {
        if (!target || !target.length) return
        target.forEach(item => {
          let obj = item.queryModel
          if (!obj) return
          obj.orderBy = ''
          for (let i in obj.param) {
            obj.param[i] = ''
          }
        })
      }
    },
    beforeDestroy () {
      this.$store.commit('UPDATE_ISDETAIL', '1')
      this.$store.commit('UPDATE_ISCOLLAPSE', '1')
    },
    mounted () {
    }
  }
</script>

<style lang="scss">
.nb-detail-wrapper{
  position: fixed;
  right: 0px;
  height: 100%;
  top: 0;
  z-index: 1001;
  /*overflow: hidden;*/
  box-sizing: border-box;
  padding-left: 20px;
  padding-top: 40px;
  .nb-detail-content{
    background: #f3f3f4;
    height: 100%;
    overflow: auto;
    box-shadow: 0px 7px 14px 0 #cecdcd;
    .detail-top-wrapper{
      background: white;
      margin: 15px;
      padding: 20px;
      display: flex;
      min-height: 100px;
      img{
        display: block;
        width: 100px;
        height: 100px;
        margin-right: 20px;
      }
      .detail-title-wrappers{
        flex: 1;
        display: flex;
        flex-direction: column;
        .title{
          font-size: 18px;
          color: #333;
          padding-bottom: 10px;
        }
        .tips{
          flex: 1;
          font-size: 13px;
          color: #aaa;
          flex: 1;
        }
        .footers{
          .title-info-wrapper:first-child{
            padding-left: 0 !important;
          }
          .title-info-wrapper:last-child{
            padding-right: 0 !important;
          }
          .title-info-wrapper:last-child:after{
            display: none;
          }
        }
      }
      .button-wrapper{
        font-size: 0;
        .back-btn{
          margin: 0;
        }
      }
    }
    .detail-content-wrapper{
      margin: 0 15px 15px;
      position: relative;
      .detail-content-left{
        background: white;
      }
      .detail-content-left.m{
        margin-right: 295px;
      }
      .detail-content-right{
        position: absolute;
        right: 0;
        top: 0;
        width: 280px;
      }
    }
  }
  .el-icon-error{
    font-size: 20px;
    position: fixed;
    right: 11px;
    top: 63px;
    color: rgba(0,0,0,.5);
    cursor: pointer;
  }
  .el-tabs__item{
    height: 50px;
    line-height: 50px;
    color: #666;
  }
  .el-tabs__nav-prev,.el-tabs__nav-next{
    top: 6px;
  }
  .el-tabs__item:after{
    display: none;
  }
}
  .detail-enter,.detail-leave-to{
    transform: translate3d(100%, 0, 0);
  }
  .detail-enter-active,.detail-leave-active{
    transition: all 0.3s linear;
  }
</style>
